<template>
	<div class="live" v-if="liveList.length">
		<div
			class="live-list"
			v-for="item of liveList"
			:key="item.roomId"
			v-show="item.viewerNum"
		>
			<div class="img">
				<img :src="item.imgPath" />
			</div>
			<div class="nickname">
				{{ item.nickName }}
			</div>
			<div class="view">{{ item.viewerNum }}人再看</div>
			<div class="title">
				{{ item.label }}
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			liveList: [],
		};
	},
	methods: {
		getLive() {
			this.axios("/api-live").then((res) => {
				this.liveList = res.data.data.list;
			});
		},
	},
	mounted() {
		this.getLive();
	},
};
</script>

<style lang="scss">
.live {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	padding: 0 10px 80px;
	.live-list {
		align-items: center;
		position: relative;
		width: 185px;
		height: 220px;
		margin: 10px 0;
		border-radius: 10px;
		cursor: pointer;
		transition: all 0.5s ease-in-out;
		.img {
			overflow: hidden;
			width: 90%;
			height: 70%;
			text-align: center;
			margin: 10px auto;
			img {
				height: 100%;
				transition: all 0.5s ease-in-out;
			}
		}
		.nickname {
			width: 90%;
			color: #333;
			font-size: 14px;
			margin: 5px auto 10px;
		}
		.view {
			width: 90%;
			margin: 0 auto;
			font-size: 12px;
			color: #999;
		}
		.title {
			position: absolute;
			bottom: 55px;
			left: 9px;
			width: 90%;
			height: 20px;
			line-height: 20px;
			text-align: center;
			color: #fff;
			font-size: 14px;
			background-color: rgba(0, 0, 0, 0.6);
		}
		&:hover {
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			img {
				transform: scale(1.15);
			}
		}
	}
}
</style>
